<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="/static/css/list_1.css">
    <link rel="stylesheet" type="text/css" href="/static/css/list_2.css">
    <style>
        .blue{
            color: #3072f6!important;
        }
    </style>
</head>
<body>
    <jsp:include page="head.jsp"></jsp:include>

    <div>


        <!-- 筛选项 -->
        <div class="filter">
            <div class="filter__wrapper w1150" id="filter">

                <ul>
                    <li class="filter__item--level5 filter__item--aside"><a href="javascript:;">地区</a></li>
                    <li class="filter__item--level5">
                        <a href="javascript:void(0)" class="region-a blue" data-region="">不限</a>
                    </li>
                    <li class="filter__item--level5  ">
                        <a href="javascript:void(0)" class="region-a" data-region="rushan">乳山</a>
                    </li>
                    <li class="filter__item--level5  ">
                        <a href="javascript:void(0)" class="region-a" data-region="wendeng">文登</a>
                    </li>
                    <li class="filter__item--level5  ">
                        <a href="javascript:void(0)" class="region-a" data-region="huancuiqu">环翠区</a>
                    </li>
                    <li class="filter__item--level5  ">
                        <a href="javascript:void(0)" class="region-a" data-region="jingqu">经区</a>
                    </li>
                    <li class="filter__item--level5  ">
                        <a href="javascript:void(0)" class="region-a" data-region="rongcheng">荣成</a>
                    </li>
                    <li class="filter__item--level5  ">
                        <a href="javascript:void(0)" class="region-a" data-region="gaoqu">高区</a>
                    </li>
                    <li class="filter__item--level5  ">
                        <a href="javascript:void(0)" class="region-a" data-region="lingangqu">临港区</a>
                    </li>
                </ul>



<%--                <ul class="filter__ul" data-el="rentType">--%>
<%--                    <li class="filter__item--level4 filter__item--aside"><a href="javascript:;">方式</a></li>--%>
<%--                    <li data-id="0" class="filter__item--level4 strong">--%>
<%--                        <a href="https://weihai.lianjia.com/zufang/rs%E7%8E%AF%E7%BF%A0%E5%8C%BA/" rel="nofollow">不限</a>--%>
<%--                    </li>--%>
<%--                    <li data-id="200600000001" class="filter__item--level4 ">--%>
<%--                        <a href="https://weihai.lianjia.com/zufang/rt200600000001rs%E7%8E%AF%E7%BF%A0%E5%8C%BA/">整租</a>--%>
<%--                    </li>--%>
<%--                    <li data-id="200600000002" class="filter__item--level4 ">--%>
<%--                        <a href="https://weihai.lianjia.com/zufang/rt200600000002rs%E7%8E%AF%E7%BF%A0%E5%8C%BA/">合租</a>--%>
<%--                    </li>--%>
<%--                </ul>--%>


                <ul class="filter__ul" data-el="filterPrice">
                    <li class="filter__item--level5 filter__item--aside"><a href="javascript:;">租金</a></li>
                    <li class="filter__item--level5 ">
                        <a href="javascript:void(0)" class="price-a blue" data-price-min="" data-price-max="">不限</a>
                    </li>
                    <li class="filter__item--level5 ">
                        <a href="javascript:void(0)" class="price-a" data-price-min="" data-price-max="1000">≤1000元</a>
                    </li>
                    <li class="filter__item--level5 ">
                        <a href="javascript:void(0)" class="price-a" data-price-min="1000" data-price-max="1500">1000-1500元</a>
                    </li>
                    <li class="filter__item--level5 ">
                        <a href="javascript:void(0)" class="price-a" data-price-min="1500" data-price-max="2000">1500-2000元</a>
                    </li>
                    <li class="filter__item--level5 ">
                        <a href="javascript:void(0)" class="price-a" data-price-min="2000" data-price-max="2500">2000-2500元</a>
                    </li>
                    <li class="filter__item--level5 ">
                        <a href="javascript:void(0)" class="price-a" data-price-min="2500" data-price-max="3000">2500-3000元</a>
                    </li>
                    <li class="filter__item--level5 ">
                        <a href="javascript:void(0)" class="price-a" data-price-min="3000" data-price-max="5000">3000-5000元</a>
                    </li>
                    <li class="filter__item--level5 ">
                        <a href="javascript:void(0)" class="price-a" data-price-min="5000" data-price-max="">≥5000元</a>
                    </li>
                    <li class="filter__item--input">
                        <input type="text" id="priceMin" value="">-<input type="text" id="priceMax" value="">元<span class="filter__button price-confirm"></span></li>
                </ul>


                <ul class="filter__ul ">
                    <li class="filter__item--level5 filter__item--aside"><a href="javascript:;">朝向</a></li>
                    <li class="filter__item--level5 ">
                        <a href="javascript:void(0)" class="ori-a blue" data-ori="">不限</a>
                    </li>
                    <li class="filter__item--level5 ">
                        <a href="javascript:void(0)" class="ori-a" data-ori="dong">东</a>
                    </li>
                    <li class="filter__item--level5 ">
                        <a href="javascript:void(0)" class="ori-a" data-ori="nan">南</a>
                    </li>
                    <li class="filter__item--level5 ">
                        <a  href="javascript:void(0)" class="ori-a" data-ori="xi">西</a>
                    </li>
                    <li class="filter__item--level5 ">
                        <a href="javascript:void(0)" class="ori-a" data-ori="bei">北</a>
                    </li>
                </ul>


            </div>
        </div>

        <!-- 房源列表相关信息 -->
        <div class="content w1150" id="content">
            <div class="content__article">
                <!-- 搜索结果排序模块 -->
                <ul class="content__filter">
                    <li>
                        <a href="javascript:void(0)" class="sort-a blue" data-sort="updateTime">最新上架</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" class="sort-a" data-sort="price">价格</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" class="sort-a" data-sort="area">面积</a>
                    </li>
                </ul>

                <!-- 有结果时，房源列表 -->
                <div class="content__list" id="list">

                    <!-- 房源列表模块 -->
<%--                    <div class="content__list--item">--%>
<%--                        <a class="content__list--item--aside" href="javascript:void(0)" target="_blank">--%>
<%--                            <img src="">--%>
<%--                        </a>--%>
<%--                        <div class="content__list--item--main">--%>
<%--                            <p class="content__list--item--title">--%>
<%--                                <a target="_blank" href=""> 整租·侨乡广场二期 3室2厅 南/北 </a>--%>
<%--                            </p>--%>
<%--                            <p class="content__list--item--des">--%>
<%--                                <a href="javascript:void(0)" target="_blank">环翠区</a>--%>
<%--                                <i>/</i>120.00㎡<i>/</i>南 北<i>/</i>3室2厅1卫--%>
<%--                            </p>--%>
<%--                            <p class="content__list--item--bottom oneline">--%>
<%--                                <i>精装</i>--%>
<%--                                <i>集中供暖</i>--%>
<%--                            </p>--%>
<%--                            <p class="content__list--item--brand oneline">--%>
<%--                                <span class="content__list--item--time">13天前维护</span>--%>
<%--                            </p>--%>
<%--                            <span class="content__list--item-price"><em>1980</em> 元/月</span>--%>
<%--                        </div>--%>
<%--                    </div>--%>
                </div>
            </div>


        </div>












        <div class="clear"></div>
        <div>
            <div class="easyui-panel">
                <div id="page" class="easyui-pagination"></div>
            </div>
        </div>
    </div>


    <script>
        var initPageSize = 40;
        var initPageNumber = 1;
        var initSort = '';
        var initOri = '';
        var initRegion = '';
        var initPriceMin = -1;
        var initPriceMax = -1;

        $(function(){
            list(initPageNumber, initPageSize);
            initPagination();
        });


        // 初始化分页条数
        function initPagination() {
            $.ajax({
                url: "/lease/public/getValidCount",
                type: "POST",
                dataType: "json",
                data: {
                    ori: initOri,
                    region: initRegion,
                    priceMin: initPriceMin,
                    priceMax: initPriceMax,
                    sort: initSort
                },
                success: function(result) {
                    console.log(result);

                    if (result.success) {
                        $('#page').pagination({
                            pageSize: initPageSize,    /* 初始的页大小 */
                            pageNumber: initPageNumber,  /* 初始的页码 */
                            total: result.data,    /* 同步方法，获取表的记录数 */
                            layout:['first','prev','links','next','last'],
                            onSelectPage: function(pageNumber, pageSize) {
                                list(pageNumber, pageSize);
                            }
                        });
                    }
                }
            });
        }



        $(".sort-a").click(function(){
            let sort = $(this).data("sort");

            $(".sort-a").removeClass('blue');
            $(this).addClass('blue');
            initSort = sort;

            initPagination();
            list(initPageNumber, initPageSize);
        });

        $(".ori-a").click(function(){
            let ori = $(this).data("ori");

            $(".ori-a").removeClass('blue');
            $(this).addClass('blue');
            initOri = ori;

            initPagination();
            list(initPageNumber, initPageSize);
        });


        $(".region-a").click(function(){
            let region = $(this).data("region");

            $(".region-a").removeClass('blue');
            $(this).addClass('blue');
            initRegion = region;

            initPagination();
            list(initPageNumber, initPageSize);
        });


        $(".price-a").click(function(){
            let priceMin = $(this).data("priceMin");
            let priceMax = $(this).data("priceMax");

            $(".price-a").removeClass('blue');
            $(this).addClass('blue');

            if(priceMin !== '') {
                initPriceMin = priceMin;
            } else {
                initPriceMin = -1;
            }

            if(priceMax !== '') {
                initPriceMax = priceMax;
            } else {
                initPriceMax = -1;
            }

            initPagination();
            list(initPageNumber, initPageSize);

        });

        $(".price-confirm").click(function(){
            let priceMin = $('#priceMin').val();
            let priceMax = $('#priceMax').val();

            if(priceMin !== '' && !$.isNumeric(priceMin)) {
                $.messager.alert({
                    top: 200,
                    title: '提示',
                    msg: '请正确输入最小金额'
                });
                return;
            }

            if(priceMax !== '' && !$.isNumeric(priceMax)) {
                $.messager.alert({
                    top: 200,
                    title: '提示',
                    msg: '请正确输入最大金额'
                });
                return;
            }

            $(".price-a").removeClass('blue');

            if(priceMin !== '') {
                initPriceMin = priceMin;
            } else {
                initPriceMin = -1;
            }

            if(priceMax !== '') {
                initPriceMax = priceMax;
            } else {
                initPriceMax = -1;
            }

            initPagination();
            list(initPageNumber, initPageSize);
        });



        function list(pageNumber, pageSize) {
            let data = {
                pageNumber: pageNumber,
                pageSize: pageSize,
                ori: initOri,
                region: initRegion,
                priceMin: initPriceMin,
                priceMax: initPriceMax,
                sort: initSort
            };

            console.log(data);

            $.ajax({
                url: "/lease/public/findByPage",
                type: "POST",
                dataType: "json",
                data: data,
                success: function(result) {
                    console.log(result);

                    if(result.success) {
                        let html = '<div class="content__list--item">\n' +
                            '                <a class="content__list--item--aside" href="javascript:void(0)" target="_blank">\n' +
                            '                    <img src="" onerror="this.src=\'/static/images/img_error.png\'">\n' +
                            '                </a>\n' +
                            '                <div class="content__list--item--main">\n' +
                            '                    <p class="content__list--item--title">\n' +
                            '                        <a target="_blank" href=""> 整租·侨乡广场二期 3室2厅 南/北 </a>\n' +
                            '                    </p>\n' +
                            '                    <p class="content__list--item--des">\n' +
                            '                        <a href="javascript:void(0)" target="_blank">环翠区</a>\n' +
                            '                        <i>/</i>120.00㎡<i>/</i>南 北<i>/</i>3室2厅1卫\n' +
                            '                    </p>\n' +
                            '                    <p class="content__list--item--bottom oneline">\n' +
                            '                        <i>精装</i>\n' +
                            '                        <i>集中供暖</i>\n' +
                            '                    </p>\n' +
                            '                    <p class="content__list--item--brand oneline">\n' +
                            '                        <span class="content__list--item--time">13天前维护</span>\n' +
                            '                    </p>\n' +
                            '                    <span class="content__list--item-price"><em>1980</em> 元/月</span>\n' +
                            '                </div>\n' +
                            '            </div>';
                        html = '';
                        $.each(result.data, function(index, data) {

                            let tag = '';
                            if(data.house !== null && data.house.tag !== null && data.house.tag !== '') {
                                $.each(data.house.tag.split(','), function(index, data) {
                                    if(data !== '') {
                                        tag = tag + '<i>' + data + '</i>';
                                    }
                                });
                            }

                            html = html + '<div class="content__list--item">\n' +
                                '                <a class="content__list--item--aside" href="/lease/public/detail/' + data.id + '" target="_blank">\n' +
                                '                    <img src="/preview/img/' + data.house.img + '" onerror="this.src=\'/static/images/img_error.png\'">\n' +
                                '                </a>\n' +
                                '                <div class="content__list--item--main">\n' +
                                '                    <p class="content__list--item--title">\n' +
                                '                        <a target="_blank" href="/lease/public/detail/' + data.id + '"> ' + data.title + ' </a>\n' +
                                '                    </p>\n' +
                                '                    <p class="content__list--item--des">\n' +
                                '                        <a href="javascript:void(0)" target="_blank">' + data.house.regionText + '</a>\n' +
                                '                        <i>/</i>' + data.house.area + '㎡<i>/</i>' + data.house.orientationText + '<i>/</i>' + data.house.typeText + '\n' +
                                '                    </p>\n' +
                                '                    <p class="content__list--item--bottom oneline">' + tag + '</p>\n' +
                                '                    <p class="content__list--item--brand oneline">\n' +
                                '                        <span class="content__list--item--time">' + data.createTime + '</span>\n' +
                                '                    </p>\n' +
                                '                    <span class="content__list--item-price"><em>' + data.price + '</em> 元/月</span>\n' +
                                '                </div>\n' +
                                '            </div>';

                        });

                        $("#list").html(html);
                    } else {
                        top.$.messager.show({
                            title: 'Error',
                            msg: '网络错误'
                        });
                    }

                }
            });
        }


    </script>
</body>
</html>